import React from "react";
import "./index.css"

const redp = require("../../images/redpacket1.png")

export default class RedRain extends React.Component {

    constructor(props){
        super(props)
        // this.redEnvelope = React.createRef();
    }
    state = {
        offsetX :this.props.offsetX,
        offsetY : this.props.offsetY,
        speed : this.props.speed,
        money : this.props.money,
        distance:this.props.distance,
    }

    componentDidMount() {
        // const {speed,distance} = this.state;
        // setInterval(()=>{
        //     const {offsetY} = this.state;
        //     this.setState({offsetY: offsetY+distance})
        // },speed)
        // this.redEnvelope.current.style.top = window.innerHeight + "px"
    }

    click = ()=>{
        const {money} =this.state;
        const {index} = this.props;
        this.props.onClick(money)
        this.props.delete(index)
    };

    render() {

        const { offsetX, offsetY } = this.state;
        if (offsetY > window.innerHeight * 0.9)
            this.props.delete(this.props.index);
        const rand = Math.round(Math.random()*10);
        let classStyle = "wrapImg";
        switch (rand) {
            case 0:
                classStyle = "wrapImg";
                break;
            case 1:
                classStyle = "wrapImg1";
                break;
            case 2:
                classStyle = "wrapImg2";
                break;
            case 3:
                classStyle = "wrapImg3";
                break;
            case 4:
                classStyle = "wrapImg4";
                break;
            case 5:
                classStyle = "wrapImg5";
                break;
            case 6:
                classStyle = "wrapImg6";
                break;
            default:
                classStyle = "wrapImg7"
        }

        return (
            <div
                // ref={this.redEnvelope}
                key={this.props.index}
                className={classStyle}
                onClick={this.click}
            >
                <img className="imgSet" src={redp} alt='红包' />
            </div>
        );
    }
}
